<template>
    <header class="app-header">
      <div class="header-left">
        <router-link to="/" class="logo">小红书</router-link>
        
      </div>
      <div class="header-center">
        <el-input
          placeholder="搜索笔记、商品和用户"
          class="search-input"
          v-model="searchText"
        >
          <template #prefix>
            <el-icon><search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="header-right">

        <el-button type="text" @click="toggleFullscreen" style="margin-right: 7px;">
                      <el-icon :size="23" color="#39587E">
                        <component :is="isFullscreen ? Aim : FullScreen" />
                      </el-icon>
        </el-button>

        <el-dropdown>
          <span class="dropdown-link">创作中心</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>发布笔记</el-dropdown-item>
              <el-dropdown-item>草稿箱</el-dropdown-item>
              <el-dropdown-item>创作学院</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <span class="dropdown-link">业务合作</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>广告合作</el-dropdown-item>
              <el-dropdown-item>品牌合作</el-dropdown-item>
              <el-dropdown-item>联系我们</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { Search,Aim, FullScreen } from '@element-plus/icons-vue'
  const isFullscreen = ref(false); // 新增：用于跟踪全屏状态
  import screenfull from'screenfull'; // 引入 screenfull 库  npm install screenfull
  const searchText = ref('')


  // 新增：切换全屏的方法
const toggleFullscreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle().then(() => {
      isFullscreen.value = screenfull.isFullscreen;
    }).catch((err) => {
      console.error('Error while toggling fullscreen:', err);
    });
  }
};

  </script>
  
  <style scoped>
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .logo {
    font-size: 24px;
    font-weight: bold;
    color: #ff2442;
    text-decoration: none;
  }
  
  .dropdown-link {
    cursor: pointer;
    font-size: 16px;
  }
  
  .header-center {
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  </style>